<template>
    <div class="page-content">
        <div class="page-title">
            <img :src="pageTitleIcon" alt=""> {{ menuStore.navList[menuStore.navList.length - 1] }}
        </div>
        <div class="content-slot">
            <slot></slot>
        </div>

    </div>
</template>

<script setup>
import { useMenu } from "@/store/menuStore"
import pageTitleIcon from "@/assets/images/page_icon.png"
const menuStore = useMenu()
</script>

<style lang="scss" scoped>
.page-content {
    padding: 20px 20px 0 20px;
    box-sizing: border-box;
    height: calc(100vh - 80px - 20px - 48px);
    background: rgba(255, 255, 255, 1);

    .page-title {
        display: flex;
        align-items: center;
        font-size: 18px;
        font-weight: bold;
        color: rgba(51, 51, 51, 1);
    }

    .content-slot {
        height: calc(100vh - 80px - 40px - 80px - 20px);
    }
}
</style>